<div [@routerTransition]>
  <!-- <div class="m-subheader">
    <div class="d-flex align-items-center">
      <div class="mr-auto">
        <h3 class="m-subheader__title"><span>生产准备</span></h3>
      </div>
    </div>
    style="background-color: #2f2e3c; height: 62rem"
  </div> -->

  <div
    class="m-content"
    style="
      height: 68rem;
      background: url(/assets/common/images/demo/bg02.png);

      background-repeat: no-repeat;
      background-size: 100% 100%;
      -moz-background-size: 100% 100%;
    "
  >
    <div class="m-portlet__body">
      <div class="row">
        <div class="col-md-12 datachar-header">
          <div class="header-left fl" id="time"></div>
          <div class="header-center fl">
            <div class="header-title">钣金车间月度计划及生产准备</div>
            <div class="header-img"></div>
          </div>
          <div class="header-right fl">
            <a
              class="btn btn-primary"
              style="
                background-color: transparent;
                margin-top: 2rem;
                border: 1px solid rgba(25, 186, 139, 0.17);
              "
              href="/#/app/datadisplay/demo2"
            >
              制造执行数据分析
            </a>
            <a
              class="btn btn-primary"
              style="background-color: transparent; margin-top: 2rem"
              href="/#/app/datadisplay/demo3"
            >
              经营管理数据分析
            </a>
            <button
              class="btn btn-primary"
              *ngIf="isshow == true"
              style="background-color: transparent; margin-top: 2rem"
              (click)="hiddentop()"
            >
              隐藏
            </button>
            <button
              class="btn btn-primary"
              *ngIf="isshow == false"
              style="background-color: transparent; margin-top: 2rem"
              (click)="showtop()"
            >
              显示
            </button>
          </div>
          <div class="header-bottom fl"></div>
        </div>
        
        <div class="col-md-12">
          <div class="dashboard_graph x_panel" style=" height: 51px;display: flex;justify-content: flex-end;">
              <div style="width: 21%; display:flex; align-items: center;" >
             <label style ="margin-right: 10px; margin-bottom: 0px;color: #fff!important;"
             >请选择时间:</label >
             <p-calendar [(ngModel)]="getTime" view="month"  dateFormat="yy-mm" [yearNavigator]="true" [yearNavigator]="true"  yearRange="1000:2050" ></p-calendar>
             <button 
             class="btn btn-primary"
             (click)="init()"
             style="height: 32px; margin-left: 5px;line-height: 100%;background-color: #001131;"
            >
             查询
         </button>
          </div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="col-md-3 datachar-left">
            <div class="datachar-left-top">
              <div
                class="col-md-4"
                style="
                  float: left;
                  font-size: 0.6vw;
                  color: #fff;
                  font-weight: 600px;
                  text-align: center;
                "
              >
                固定项投产项数
              </div>
              <div
                class="col-md-4"
                style="
                  float: left;
                  font-size: 0.6vw;
                  color: #fff;
                  font-weight: 600px;
                  text-align: center;
                "
              >
                力争项投产项数
              </div>
              <div
                class="col-md-4"
                style="
                  float: left;
                  font-size: 0.6vw;
                  color: #fff;
                  font-weight: 600px;
                  text-align: center;
                "
              >
                在制项投产项数
              </div>
              <div
                id="chart4"
                class="allnav col-md-4"
                style="float: left; padding-bottom: 5%"
              ></div>
              <div
                id="chart5"
                class="allnav col-md-4"
                style="float: left; padding-bottom: 5%"
              ></div>
              <div
                id="chart6"
                class="allnav col-md-4"
                style="float: left; padding-bottom: 5%"
              ></div>
            </div>
            <div class="datachar-left-bottom">
              <div class="col-md-6" style="float: left; height: 100%">
                <div class="titledemo">型号占比</div>
                <div id="chart7" class="allnav"></div>
              </div>
              <div class="col-md-6" style="float: left; height: 100%">
                <div class="titledemo">生产班组任务</div>
                <div id="chart2" class="allnav"></div>
              </div>
            </div>
          </div>
          <div class="col-md-6 datachar-center">
            <div class="datachar-center-top">
              <div class="clearfix navboxall" style="height: 100%">
                <div class="pulll_left num">
                  <div class="numbt">车间本月计划项数</div>
                  <div class="numtxt">{{monthlyPlanCount}}</div>
                </div>
                <div class="pulll_left num" style="margin-left: 5%">
                  <div class="numbt">车间本月投产项数</div>
                  <div class="numtxt">{{monthlyPlanProductionCount}}</div>
                </div>
                <div class="pulll_right zhibiao">
                  <div class="zb1">
                    <span>工艺准备</span>
                    <div id="zb1"></div>
                  </div>
                  <div class="zb2">
                    <span>工装准备</span>
                    <div id="zb2"></div>
                  </div>
                  <div class="zb3">
                    <span>原材料准备</span>
                    <div id="zb3"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="datachar-center-center">
              <div id="chart1" class="allnav"></div>
            </div>
          </div>
          <div class="col-md-3 datachar-right">
            <div class="datachar-right-top">
              <div class="echart wenzi">
                <div class="gun">
                  <span style="">任务号</span>
                  <span>图号</span>
                  <span>属性</span>
                  <span>所缺条件</span>
                </div>
                <div id="FontScroll" class="myscroll">
                  <ul>
                    <li *ngFor="let item of itemListDto;let key=index">
                      <div class="fontInner clearfix">
                        <span>{{item.taskCode}}</span>
                        <span>{{item.drawingCode}}</span>
                        <span>{{item.monthPlanType}}</span>
                        <span>
                          <b class="gy">{{item.monthPlanTypeName}}</b>
                          <!-- <b class="gy" *ngIf="key%2==0">{{item.monthPlanTypeName}}</b>
                          <b class="ycl" *ngIf="!key%2==0">{{item.monthPlanTypeName}}</b> -->
                        </span>
                      </div>
                    </li>
                    <!-- <li>
                      <div class="fontInner clearfix">
                        <span>task-53-002</span>
                        <span>1CE311-100</span>
                        <span>力争项</span>
                        <span><b class="gy">缺工艺</b></span>
                      </div>
                    </li>
                    <li>
                      <div class="fontInner clearfix">
                        <span>task-53-003</span>
                        <span>1CE311-100</span>
                        <span>固定项</span>
                        <span><b class="ycl">缺材料</b></span>
                      </div>
                    </li>
                    <li>
                      <div class="fontInner clearfix">
                        <span>task-53-004</span>
                        <span>1CE311-100</span>
                        <span>固定项</span>
                        <span><b class="gy">缺工艺</b></span>
                      </div>
                    </li>
                    <li>
                      <div class="fontInner clearfix">
                        <span>task-53-005</span>
                        <span>1CE311-100</span>
                        <span>固定项</span>
                        <span><b class="gz">缺工装</b></span>
                      </div>
                    </li>
                    <li>
                      <div class="fontInner clearfix">
                        <span>task-53-006</span>
                        <span>1CE311-100</span>
                        <span>固定项</span>
                        <span><b class="gy">缺工艺</b></span>
                      </div>
                    </li>
                    <li>
                      <div class="fontInner clearfix">
                        <span>task-53-007</span>
                        <span>1CE311-100</span>
                        <span>固定项</span>
                        <span><b class="gz">缺工装</b></span>
                      </div>
                    </li>
                    <li>
                      <div class="fontInner clearfix">
                        <span>task-53-008</span>
                        <span>1CE311-100</span>
                        <span>固定项</span>
                        <span><b class="ycl">缺材料</b></span>
                      </div>
                    </li>
                    <li>
                      <div class="fontInner clearfix">
                        <span>task-53-009</span>
                        <span>1CE311-100</span>
                        <span>固定项</span>
                        <span><b class="ycl">缺材料</b></span>
                      </div>
                    </li>
                    <li>
                      <div class="fontInner clearfix">
                        <span>task-53-010</span>
                        <span>1CE311-100</span>
                        <span>固定项</span>
                        <span><b class="ycl">缺材料</b></span>
                      </div>
                    </li> -->
                  </ul>
                </div>
              </div>
            </div>
            <div class="datachar-right-bottom">
              <div id="chart3" class="allnav"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
